Skip to content

design: 문서 타이포그래피를 OpenChain-KWG 기준으로 정렬 (색상은 유지)#218

Merged
haksungjang merged 1 commit into
masterfrom
design/typography-kwg-alignment
Jun 11, 2026
Merged

design: 문서 타이포그래피를 OpenChain-KWG 기준으로 정렬 (색상은 유지)#218
haksungjang merged 1 commit into
masterfrom
design/typography-kwg-alignment

Conversation

@haksungjang

Copy link
Copy Markdown
Member

배경

세 Hugo 사이트(sktelecom / OpenChain-KWG / haksungjang)의 문서 페이지 look&feel을 비교한 결과, sktelecom만 독자적인 Vercel 모노크롬 + Geist 폰트 체계였다. 폰트·타이포그래피를 OpenChain-KWG(Google devsite 계열) 기준으로 맞추되, 색상은 기존 Vercel 모노크롬을 그대로 유지하기로 했다.

변경

  • 폰트: Geist self-host → Roboto + Pretendard(CDN), 코드 폰트 JetBrains Mono
  • 헤딩: 크기·굵기를 KWG 기준으로 (H1 28 / H2 22 / H3 16px, weight 500). 글 제목 h1이 Docsy 0.15 기본 규칙(​.td-content > h1 { font-weight: 700 })으로 700이 되던 것을 500으로 환원
  • 배지: 본문 Tags/Categories를 둥근 pill로
  • 날짜: 블로그 날짜를 한글 포맷("2026년 5월 18일")으로
  • Alert 박스: 아이콘 그리드 → 좌측 보더 + 연배경 구조로 단순화
  • self-host 폰트 파일(Geist/Pretendard woff2) 제거

검증

  • npm run build 정상
  • 두 사이트를 같은 1280px 창으로 띄워 Chrome DevTools Protocol로 computed 값 측정 → 본문 16px, 본문폭 781px, H1~H3(28/22/16px·weight 500)이 KWG와 픽셀 단위까지 일치 확인

- 본문 폰트를 Geist self-host에서 Roboto+Pretendard(CDN)로 교체, 코드 폰트는 JetBrains Mono
- 헤딩 크기·굵기를 KWG(Google devsite) 기준으로 조정 (H1 28 / H2 22 / H3 16px, weight 500)
- 글 제목 h1이 Docsy 0.15 기본 규칙으로 700이 되던 것을 500으로 환원
- 본문 Tags/Categories 배지를 둥근 pill 형태로
- 블로그 날짜를 한글 포맷("2026년 5월 18일")으로
- Alert 박스를 아이콘 그리드에서 좌측 보더 + 연배경 구조로 단순화
- 색상은 기존 Vercel 모노크롬을 그대로 유지

Geist/Pretendard self-host 폰트 파일은 CDN으로 대체하여 제거
@haksungjang haksungjang merged commit 1a74b4b into master Jun 11, 2026
3 checks passed
@haksungjang haksungjang deleted the design/typography-kwg-alignment branch June 11, 2026 07:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant